<template>
  <div class="box">
    <el-row>
      <el-col :span="8">
        <div class="card">
          <div class="front mid">
            <img src="https://blog-node-1302040582.cos.ap-nanjing.myqcloud.com/img1.jpg" />
          </div>
          <div class="back mid">
            <div class="back-content">
              <h2>项目</h2>
              <div class="content-item">
                <span>
                  <nuxt-link to="/coder/articles/25">Blog</nuxt-link>
                </span>
                <span>
                  <nuxt-link to="/coder/articles/25">小程序</nuxt-link>
                </span>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="card">
          <div class="front mid">
            <img src="https://blog-node-1302040582.cos.ap-nanjing.myqcloud.com/img2.jpg" />
          </div>
          <div class="back mid">
            <div class="back-content">
              <h2>源码</h2>
              <div class="content-item">
                <span>
                  <a href="https://gitee.com/yq770770/blog-web">Blog前端</a>
                </span>
                <span>
                  <a href="https://gitee.com/yq770770/blog-admin">BlogCMS</a>
                </span>
                <span>
                  <a href="https://gitee.com/yq770770/blog-api">Blog服务端</a>
                </span>
                <span>
                  <a href="https://gitee.com/yq770770/social_wechat_applet">小程序前端</a>
                </span>
                <span>
                  <a href="https://gitee.com/yq770770/social_applet_server">小程序服务端</a>
                </span>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="card">
          <div class="front mid">
            <img src="https://blog-node-1302040582.cos.ap-nanjing.myqcloud.com/img3.png" />
          </div>
          <div class="back mid">
            <div class="back-content">
              <h2>Bug</h2>
              <div class="content-item">
                <span>
                  <nuxt-link to="/coder/articles/27">手写Bug</nuxt-link>
                </span>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  async asyncData({ $axios }) {
    return {};
  },
  mounted() {
    this.$nextTick(() => {
      this.$nuxt.$loading.start();

      setTimeout(() => this.$nuxt.$loading.finish(), 500);
    });
  }
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-row {
  width: 100%;
}
.el-col {
  display: flex;
  justify-content: center;
  align-items: center;
}
.card {
  cursor: pointer;
  height: 480px;
  width: 340px;
  position: relative;
}
.mid {
  position: absolute;
}
.front,
.back {
  width: 100%;
  height: 100%;
  overflow: hidden;
  backface-visibility: hidden;
  transition: transform 0.6s linear;
  border-radius: 15px;
}
img {
  height: 100%;
  width: 100%;
  border-radius: 15px;
}
.front {
  transform: perspective(600px) rotateY(0deg);
}
.back {
  background: #f1f1f1;
  transform: perspective(600px) rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.back-content {
  color: #2c3e50;
  text-align: center;
  width: 100%;
}
.card:hover > .front {
  transform: perspective(600px) rotateY(-180deg);
}
.card:hover > .back {
  transform: perspective(600px) rotateY(0deg);
}
.content-item {
  display: flex;
  flex-direction: column;
  span {
    margin-top: 5px;
    a,nuxt-link{
      color: grey;
      text-decoration: none;
    }
  }
}
</style>